<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="css/my_base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/select.css">
    <link rel="stylesheet" href="css/double-date.css">
    <link rel="stylesheet" type="text/css" href="css/dateRange.css" />

    <script type="text/javascript" src="script/dateRange.js"></script>
    <script src='script/jquery-2.0.3.js'></script>
    <script src='js/double-date.js'></script>
    <script src='script/jquery.htools.select.js'></script>
    <script type="text/javascript" src='script/echart.js'></script>
    <script src='js/index.js'></script>
    <style>
        
    .double_pick,.tool_date  {
        margin-left: 2em;
    }
    .date_title,
    .opt_sel {
        background: rgb(45, 56, 74);
    }
    .ta_date {
        border: 1px solid;
        border-color: rgb(45, 56, 74);
        background-image: none;
        box-shadow: none;
        border-radius: 0;
    }
    .ta_date .date_title {
        color: #fff;
    }
    .ta_date .date_title {
        border-right: 1px solid transparent;
    }
    </style>
</head>

<body>
    <div class="main-box" style="width: 100%; height: 100%;">
        <div class="main-box-content main02">
            <div class="nav_bar_data clearfix">
                <div class="query_btn query_day fl">日</div>
                <div class="fl double_pick">
                    <div class="ta_date" id="div_date_demo3">
                        <span class="date_title" id="date_demo3"></span>
                        <a class="opt_sel" id="input_trigger_demo3" href="#">
                            <i class="i_orderd"></i>
                        </a>
                    </div>
                    <div id="datePicker"></div>
                </div>
                <script type="text/javascript">
                var dateRange = new pickerDateRange('date_demo3', {
                    // aRecent7Days : 'aRecent7DaysDemo3', //最近7天
                    isTodayValid: false,
                    defaultText: ' 至 ',
                    inputTrigger: 'input_trigger_demo3',
                    theme: 'ta',
                    startDate:'2017-03-18',
                    endDate : '2017-03-21',
                    // needCompare : true,
                    // isSingleDay : true,//只选一天的时间
                    // shortOpr : true,//只显示一个日期
                    success: function(obj) {
                    }
                });
                </script>
                <div class="fl query_btn" id="query">查 询</div>
            </div>
            <div style="width: 98%;margin-left: 1%;border: 1px solid #2c3443;">
                <div class="data_analyze_lengend">
                    <div class="data_analyze_lengend_wrapper">
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#192b5b"></span><span class="analyze_lengend_name">进水压力</span></div>
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#13fcdf"></span><span class="analyze_lengend_name">出水压力</span></div>
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#c2962d"></span><span class="analyze_lengend_name">1# 液位</span></div>
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#1acd4f"></span><span class="analyze_lengend_name">2# 液位</span></div>
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#d8834c"></span><span class="analyze_lengend_name">耗电量</span></div>
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#21a4e8"></span><span class="analyze_lengend_name">高压</span></div>
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#fff100"></span><span class="analyze_lengend_name">中压</span></div>
                        <div class="analyze_lengend"><span class="analyze_square" style="background:#a7d56e"></span><span class="analyze_lengend_name">低压</span></div>
                        <div id="ico_lengend"></div>
                    </div>
                </div>
                <div class="" id='model10' style="padding:0px;height:480px;width: 100%;"></div>
                <div class="" id='model11' style="padding:0px;margin-top: 0px; height:480px;width: 100%;"></div>
            </div>
        </div>
        <script type="text/javascript" src="js/DataAnalysis.js"></script>
    </div>
</body>
</html>
